<!DOCTYPE html>

<html>
<head>
    <title>Zation</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="jquery.scrollTo-min.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <link rel="stylesheet" href="metal.css" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="animation.css" />
</head>

<body>
    <div class="wapper">
        <div class="light"></div>
        <header id="head">
            <h1>Zation</h1>
            <p>A Web &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Player</p>
            <div class="metal radial" id="play"><span>G</span></div>
        </header>
        
        
        <nav>
            <div title="head" class="navHover"><span id="headIcon"></span></div>
            
            <div title="NPlayer"><span id="nplayerIcon"></span></div>
            
            <div title="Sudoku"><span id="sudokuIcon"></span></div>
            
            <div title="Contact"><span id="contactIcon"></span></div>
        </nav>
        
        <section id="NPlayer">
            <div class="pre"></div>
            <img src="img/nPlayer.png" />
            <h1>NPlayer & NPlayer Mini</h1>
            <p>
                基于<b>HTML5</b>与<b>Javascript</b>的本地MP3播放器。<br/>
                提供两个版本：<br/>
                <a target="_blank" href="http://zation.free.bg/nplayer/">完整版</a><br/>
                <a target="_blank" href="http://zation.free.bg/nplayermini/">迷你版</a>
            </p>
            <div class="next"></div>
            
        </section>
        <section id="Sudoku">
            <div class="pre"></div>
            <img src="img/sudoku.png" />
            <h1>Sudoku Game</h1>
            <p>
                基于<b>HTML5</b>与<b>Javascript</b>的数独游戏。<br/>
                <a target="_blank" href="http://zation.free.bg/sudoku/">开始游戏</a>
                
            </p>
            <div class="next"></div>
        </section>
        <section id="Contact">
            <div class="pre"></div>
            <h1>About Me</h1>
            <p>
                一个专注于前端开发的<b>攻城师</b><br/>
                一个热爱前沿技术的<i>技术宅</i><br/>
                一个热爱生活的<b>吐槽</b>人<br/>
                所有的项目已经<a target="_blank" href="http://code.google.com/p/zation/">在此</a>开源<br/>
                <span>欢迎大家与我讨论交流关于前端开发的一切!</span><br/>
            </p>
            <div>
                <a target="_blank" href="http://weibo.com/1404704484"><img src="img/sina.png" /></a>
                <a target="_blank" href="https://plus.google.com/100624981016590778324"><img src="img/gplus.png" /></a>
                <a href="mailto:zation1@gmail.com"><img src="img/gmail.png" /></a>
            </div>
        </section>
        
        
        <footer></footer>
    </div>
</body>
</html>
